import React, { useState } from 'react';
import { ConfigProvider, Layout, theme } from 'antd';
import Header from '@/layouts/components/Header';
import { Outlet, useModel } from '@umijs/max';
import Sidebar from '@/layouts/components/Sidebar';

const { Content } = Layout;

export default (props: any) => {
    const [collapsed, setCollapsed] = useState(false);
    const {} = theme.useToken();
    const [dark, setDark] = useState(false);
    const [paddingLeft, setPaddingLeft] = useState(256);
    const { initialState } = useModel('@@initialState');

    const changeCollapsed = (b) => {
        setCollapsed(b);
        if (b) {
            setTimeout(() => {
                setPaddingLeft(80);
            }, 50);
        } else {
            setPaddingLeft(256);
        }
    };
    console.log(initialState?.settings?.navTheme)
    return (
        <ConfigProvider
            theme={{
                token: {
                    borderRadius: 4,
                },
                algorithm:
                    initialState?.settings?.navTheme === 'light'
                        ? theme.defaultAlgorithm
                        : theme.darkAlgorithm,
            }}
        >
            <Layout>
                <Sidebar dark={dark} collapsed={collapsed} />
                <Layout style={{ paddingLeft, paddingTop: 56 }}>
                    <Header
                        dark={dark}
                        setDark={(dark: boolean) => setDark(dark)}
                        onCollapse={() => changeCollapsed(!collapsed)}
                        width={`calc(100% - ${paddingLeft}px)`}
                    />
                    <Content>
                        <Outlet />
                    </Content>

                    {/*<Footer style={{textAlign: 'center'}}>*/}
                    {/*    Ant Design ©{new Date().getFullYear()} Created by Ant UED*/}
                    {/*</Footer>*/}
                </Layout>
            </Layout>
        </ConfigProvider>
    );
};
